<template>
	<view class="w-flex-col page">
		<view class="w-flex-col group space-y-54 main">
			<view class="w-flex-col group_2">
				<view class="info">
					<view class="w-flex-row space-x-26">
						<text class="w-self-start font_1 text txt-center">商户名称</text>
						<view class="w-flex-auto ">
							<input class="font_1" type="text" placeholder="请输入商户名称" v-model="merchant_name">
						</view>
					</view>
					<view class="w-flex-row group_3 view space-x-26">
						<text class="w-self-start font_1 text_2 txt-center">商户图标</text>
						<view class="w-flex-auto">
							<!-- <tn-image-upload  :action="action" :fileList="fileList" maxCount="1" @on-success="imgSuccess"></tn-image-upload> -->
							<tm-upload :filelist.sync="filelist" max="1" auto-upload="true" :url="action" grid="2" @change="imgSuccess" code="1"></tm-upload>
						</view>
					</view>
					<view class="w-flex-row group_4 space-x-28">
						<text class="w-self-start font_1 text_3 txt-center">商户地址</text>
						<view class="w-flex-auto">
							<input class="font_1 hide" type="text" v-model="latitude">
							<input class="font_1 hide" type="text" v-model="longitude">
							<input class="font_1" type="text" placeholder="输入商户地址" v-model="address" @focus="getAddr">
						</view>
					</view>
				</view>
				<view class="w-flex-col w-justify-start w-items-center button" @tap="addData"><text
						class="text_4">立即申请</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import tmUpload from '@/tm-vuetify/components/tm-upload/tm-upload.vue';
	// import tnImageUpload from '@/tuniao-ui/components/tn-image-upload/tn-image-upload.vue';
	export default {
		components: {
			tmUpload,
			// tnImageUpload
		},
		data() {
			return {
				longitude: '1',
				latitude: '1',
				action: this.$apiBaseUrl + 'uploadImg',
				filelist: [],
				address:'',
				merchant_name:'',
				img:'',
			}
		},

		onShow() {
			this.goMy()
			// this.getWifiList()
		},
		methods: {
			imgSuccess(res){
				console.log(res[0])
				this.img = res[0]
			},
			getAddr(){
				var that = this
				console.log('当前位置');
				uni.chooseLocation({
					success: function (res) {
						that.address = res.address
						that.latitude = res.latitude
						that.longitude = res.longitude
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});


			},
			check() {
				if (!this.merchant_name) {
					return '请填写商户名称'
				}
				if (!this.img) {
					return '请填写商户图标'
				}
				if (!this.address) {
					return '请填写商户地址'
				} 
				
				return true
			},
			goMy() {
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.showModal({
						title: '还没有登录呢',
						confirmText: '确定',
						showCancel: false,
						success: (res) => {
							return uni.switchTab({
								url: '/pages/my/my'
							})
						}
					});

				}
			},
			addData() {
				let checkRes = this.check()
				if (checkRes !== true) {
					return uni.showToast({
						icon: 'none',
						title: checkRes
					})
				}
				this.$http.post('merchantAdd', {
					merchant_name: this.merchant_name,
					logo: this.img,
					address: this.address,
					longitude: this.longitude,
					latitude: this.latitude
				}).then(res => {
					return uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					
				}).catch(err => {

				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f9f9f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		
		.hide{
			display: none;
		}

		.main {
			margin-top: 30rpx;
		}

		.image {
			width: 32rpx;
			height: 32rpx;
		}

		.image_2 {
			margin-left: 30rpx;
		}

		.group {
			padding: 18rpx 34rpx 640rpx 34rpx;
			overflow-y: auto;

			.txt-center {
				display: flex;
				align-items: center;
				height: 36rpx;
			}

			.space-x-16 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 32rpx;
				}

				.equal-division-item {
					flex: 1 1 213rpx;
				}

				.space-x-4 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 8rpx;
					}
				}

				.equal-division-item_2 {
					flex: 1 1 213rpx;
				}

				.equal-division-item_3 {
					flex: 1 1 213rpx;
				}
			}

			.group_2 {
				margin-top: 35rpx;

				.info {
					background-color: #ffffff;
					padding: 48rpx;
					border-radius: 20rpx;

					.tip {
						color: green;
						margin-top: 60rpx;
						font-size: 28rpx;
					}
				}

				.space-x-26 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 52rpx;
					}

					.text {
						margin-top: 4rpx;
					}
				}

				.group_3 {
					padding: 0 4rpx;

					.picker {
						color: #ffffff;
					}

					.text_2 {
						margin-top: 4rpx;
					}

					.section {
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #f21818;
						border-radius: 10rpx;
						width: 100rpx;
						height: 50rpx;
						border: solid 2rpx #f21818;
					}

					.view_3 {
						margin-right: 12rpx;
					}
				}

				.view {
					margin-top: 82rpx;
				}

				.group_4 {
					margin-top: 80rpx;

					.text_3 {
						margin-top: 4rpx;
					}
				}

				.space-x-28 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 56rpx;
					}
				}

				.search {
					margin-right: 16rpx;
					background-color: #ffffff;
					width: 414rpx;
					height: 50rpx;
					border: solid 2rpx #000000;
				}

				.view_2 {
					margin-top: 90rpx;
				}

				.button {
					margin: 50rpx 0;
					padding: 36rpx 0 32rpx;
					background: radial-gradient(circle, #22b14C, #22b14C);
					border-radius: 10rpx;

					.text_4 {
						color: #f7f2f2;
						font-size: 32rpx;
						font-family: SourceHanSansCN;
						line-height: 30rpx;
					}
				}
			}

			.font_1 {
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				line-height: 26rpx;
				color: #000000;
			}
		}

		// .space-y-54 {
		//   & > view:not(:first-child),
		//   & > text:not(:first-child),
		//   & > image:not(:first-child) {
		//     margin-top: 20rpx;
		//   }
		// }
	}
</style>